<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>MyPetStore</title>
  <link rel="StyleSheet" href="css/mypetstoreNew.css" type="text/css" media="screen"/>
</head>
<body>
    <div th:replace="common/top"></div>

    <div>
      <div class="Back">
        <a href="mainForm" class="BackLink"><i class="fa-solid fa-circle-left"></i>Return to Main Menu</a>
      </div>

      <div class="Catalog">
        <h2 th:if="${category}!=null" th:text="${category.name}"></h2>
        <h2 th:if="${category}==null">ERROR!</h2>

        <div class="CategoryMain">
          <!--productList不为空-->
          <div th:if="${!productList.isEmpty()}">
            <!--循环productList中的Product项-->
            <div class="Category" th:each="product:${productList}">
              <div class="CategoryImg">
                <a th:href="@{/productForm(productId=${product.getProductId()})}">
                  <img th:src="${product.description.substring(14, product.description.indexOf('>')-1)}"
                       class="CategoryImgLink">
                </a>
              </div>
              <div class="CategoryName">
                <b>
                  <a th:href="@{/productForm(productId=${product.getProductId()})}" class="CategoryNameLink">
                    Name: <p th:text="${product.getName()}"></p>
                  </a>
                </b>
              </div>
              <div class="CategoryDescription">
                <a th:href="@{/productForm(productId=${product.getProductId()})}"  class="CategoryDescriptionLink">
                  Description:
                  <p th:text="${product.description.substring(product.description.indexOf('>')+1)}"></p>
                </a>
              </div>
            </div>
          </div>

          <!--productList为空-->
          <h2 th:if="${productList.isEmpty()}">Sorry for that nothing was found here...</h2>
        </div>
      </div>
    </div>


<div th:replace="common/bottom"></div>
</body>
</html>